<colors-tag>
	<div class="colors-tag" id="{colorItemsIndex}" each={colorItems,colorItemsIndex in colorsTag}>
		<p class="tag-name">{colorItemsIndex}</p>
		<div each={colorItem in colorItems} class="color-tag" style="background-color:{colorItem.hex};" onmouseover={hoverHandle} onmouseout={unHoverHandle}>
			<p class="color-name">{colorItem.name}</p>
			<span class="color-copy" data-clipboard-text="{colorItem.hex}">COPY</span>
			<p class="color-hex">{colorItem.hex}</p>
		</div>
	</div>
	<script>
		var tag = this;

		tag.on('before-mount', function() {
			tag.colors = tag.httpGet('colors.json?ver=2017.10.20.1', true);
			tag.colorsTag = tag.filterColors(tag.colors);
		});

		tag.on('mount', function() {
			var clipboard = new Clipboard('.color-copy');
			clipboard.on('success', function(e) {
				alert('色值已拷贝到剪切板！');
			});

		});

		tag.filterColors = function(colors) {
			var ret = {};
			for (colorIdx in colors) {
				for (tagIdx in colors[colorIdx].tags) {
					if (!ret[colors[colorIdx].tags[tagIdx]]) {
						ret[colors[colorIdx].tags[tagIdx]] = [];
					}
					ret[colors[colorIdx].tags[tagIdx]].push(colors[colorIdx]);
				}
			}
			return ret;
		}

		tag.httpGet = function(url, isJson) {
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.open("GET", url, false);
			xmlhttp.send();
			return isJson ? JSON.parse(xmlhttp.responseText) : xmlhttp.responseText;
		}

		tag.hoverHandle = function(e) {
			if (e.target.className != "color-tag") {
				e.target.parentNode.style.boxShadow = '0 0 6px 2px ' + e.item.colorItem.hex;
				return;
			};
			e.target.style.boxShadow = '0 0 6px 2px ' + e.item.colorItem.hex;
		}

		tag.unHoverHandle = function(e) {
			if (e.target.className != "color-tag") {
				e.target.parentNode.style.boxShadow = '0 0 1px 1px #fff';
				return;
			};
			e.target.style.boxShadow = '0 0 1px 1px #fff';
		}
	</script>
	
	<style>
		.colors-tag {
			display: inline-block;
		}

		.tag-name {
			text-indent: 10px;
			font-size: 14px;
			font-weight: bold;
			color: #333;
		}

		.color-tag {
			margin: 10px;
			border-radius: 5px;
			width: calc(12.5vw - 24px);
			height: calc(12.5vw - 24px);
			box-shadow: 0 0 1px 1px #fff;
			border: none;
			float: left;
			text-align: center;
			position: relative;
		}

		.color-tag:hover {
			transform: scale(1.05, 1.05);
			-ms-transform: scale(1.05, 1.05);
			-moz-transform: scale(1.05, 1.05);
			-webkit-transform: scale(1.05, 1.05);
			transition-duration: 0.5s;
			-moz-transition-duration: 0.5s;
			-webkit-transition-duration: 0.5s;
			z-index: 1;
		}

		.color-copy {
			display: none;
			font-size: 12px;
			line-height: 24px;
			border: 1px solid #fff;
			border-radius: 2px;
			cursor: pointer;
			background: rgba(255, 255, 255, 0.4);
			color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -40%;
			margin-top: -12px;
			width: 80%;
		}

		.color-tag:hover .color-copy {
			display: block;
		}

		.color-hex {
			color: #fff;
			font-weight: bold;
			font-size: 12px;
			text-shadow: 0 0 1px #000;
			position: absolute;
			bottom: 0;
			width: 100%;
		}

		.color-name {
			color: #000;
			font-weight: bold;
			font-size: 12px;
			text-shadow: 0 0 1px #fff;
		}
	</style>
</colors-tag>